<template>
  <section class="population">
    <div class="header">
      <h1>大数据资源服务平台-数据服务接口</h1>
    </div>
    <div class="container">
      <div class="left">
        <Panel class='application' title='应用排行'>
          <div class="radios">
            <el-radio-group v-model="applicationRadio">
              <el-radio label="day">昨日</el-radio>
              <el-radio label="week">近7天</el-radio>
              <el-radio label="month">近30天</el-radio>
            </el-radio-group>
          </div>
          <div class="application-top">
            <left-top chartId="left-top" :options="option"></left-top>
          </div>
          <res-table :tableDatas='applicationTable' :tablePro="tableProtype.left"></res-table>
        </Panel>
      </div>
      <div class="center">
        <Panel class='interface' title='大数据接口调用排行'>
          <div class="radios">
            <el-radio-group v-model="interfaceRadio">
              <el-radio label="day">昨日</el-radio>
              <el-radio label="week">近7天</el-radio>
              <el-radio label="month">近30天</el-radio>
            </el-radio-group>
          </div>
          <div class="interface-list">
            <ul>
              <li class="interface-li" v-for="(item,key) in interface_list" :key="key">
                <div class="icon">{{ key+1 }}</div>
                <span class="text">{{ item }}</span>
              </li>
            </ul>
          </div>
          <res-table :tableDatas='interfaceTable' :tablePro="tableProtype.center"></res-table>
        </Panel>
        <Panel class='interface-num' title='接口被调用次数'>
          <div class="radios">
            <el-radio-group v-model="interfaceNumRadio">
              <el-radio label="day">昨日</el-radio>
              <el-radio label="week">近7天</el-radio>
              <el-radio label="month">近30天</el-radio>
            </el-radio-group>
          </div>
          <div class="interface-chart">
            <center-chart chartId="centerChart" :options="option"></center-chart>
          </div>
        </Panel>
      </div>
      <div class="right">
        <Panel class='department' title='部门排行'>
          <div class="radios">
            <el-radio-group v-model="departmentRadio">
              <el-radio label="day">昨日</el-radio>
              <el-radio label="week">近7天</el-radio>
              <el-radio label="month">近30天</el-radio>
            </el-radio-group>
          </div>
          <div class="department-pie">
            <right-chart chartId="right-chart" :options="option"></right-chart>
          </div>
          <res-table :tableDatas='applicationTable' :tablePro="tableProtype.right"></res-table>
        </Panel>
      </div>
    </div>
  </section>
</template>


<script>
import Panel from '../components/panal'
import leftTop from '../components/data-service/left/left-top.vue'
import resTable from '../components/data-service/table.vue'
import centerChart from '../components/data-service/center/center-chart.vue'
import rightChart from '../components/data-service/right/right-chart.vue'
export default {
  components: {
    Panel,
    leftTop,
    resTable,
    centerChart,
    rightChart
  },
  data() {
    return {
      option: {},
      applicationRadio : 'day',
      interfaceRadio : 'day',
      interfaceNumRadio : 'day',
      departmentRadio : 'day',
      tableProtype: {
        left: { 'name': '应用名称', 'num': '调用次数', 'total': '数据量' },
        center: { 'name': '接口名称', 'num': '调用次数', 'total': '数据量' , 'rtime': '平均请求时间', 'gtime': '平均响应时间' },
        right: { 'name': '部门名称', 'num': '调用次数', 'total': '数据量' }
      },
      applicationTable: [
        { 'name':'超级档案', 'num': 3, 'total': 1234 },
        { 'name':'超级档案', 'num': 3, 'total': 1234 },
        { 'name':'超级档案', 'num': 3, 'total': 1234 },
        { 'name':'超级档案', 'num': 3, 'total': 1234 },
        { 'name':'超级档案', 'num': 3, 'total': 1234 },
        { 'name':'超级档案', 'num': 3, 'total': 1234 },
        { 'name':'超级档案', 'num': 3, 'total': 1234 }
      ],
      interfaceTable: [
        { 'name':'全省嫌疑人登记信息接口', 'num': 3, 'total': 1234, rtime: '2.3s', gtime: '2.3s'},
        { 'name':'全省嫌疑人登记信息接口', 'num': 3, 'total': 1234, rtime: '2.3s', gtime: '2.3s'},
        { 'name':'全省嫌疑人登记信息接口', 'num': 3, 'total': 1234, rtime: '2.3s', gtime: '2.3s'},
        { 'name':'全省嫌疑人登记信息接口', 'num': 3, 'total': 1234, rtime: '2.3s', gtime: '2.3s'},
        { 'name':'全省嫌疑人登记信息接口', 'num': 3, 'total': 1234, rtime: '2.3s', gtime: '2.3s'},
      ],
      interface_list:['全省嫌疑人登记信息接口','全省嫌疑人登记信息接口','全省嫌疑人登记信息接口','全省嫌疑人登记信息接口','全省嫌疑人登记信息接口','全省嫌疑人登记信息接口','全省嫌疑人登记信息接口','全省嫌疑人登记信息接口'],
    }
  }
}
</script>

<style lang="scss">
@import '../assets/sass/tools.scss';
@import '../assets/sass/background.scss';
@import '../assets/sass/data-service.scss';
</style>
